<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <section class="c-head-title">
        <h6><span class="fs16 c-333">笔记内容</span></h6><hr/>
    </section>
    <!--无数据提示 开始-->
    <section th:if="${#lists.isEmpty(dataMap['list'])}" class="no-data__wrap">
        <span class="no-data-ico"></span>
        <p class="mt20"><span class="c-666">还没有笔记，快快记录吧~~~</span></p>
    </section>
    <!--无数据提示 结束-->
    <section th:if="!${#lists.isEmpty(dataMap['list'])}" class="mt20">
        <div th:each="note : ${dataMap['list']}" class="play-notes__wrap">
            <aside class="play-note-ico">
                <span class="fs30 c-ccc">
                    <i class="fa fa-thumb-tack"></i>
                </span>
            </aside>
            <section>
                <p>
                    <span class="label label-primary mr5" th:text="${#numbers.formatDecimal(note['progress']/60,0,0,'POINT')}+'`'+${#numbers.formatDecimal(note['progress']%60,0,0,'POINT')}+'``'"></span>
                    <th:block th:text="${note['note']}"></th:block>
                </p>
            </section>
            <hr>
        </div>
        <section th:if="${dataMap.pages} >1" class="page-turn_wrap">
            <nav aria-label="...">
                <ul class="pager" id="page-list-context-box">
                    <li th:if="${dataMap.isFirstPage}==true" class="disabled"><a href="javascript:;"><span aria-hidden="true">←</span> 上一页</a></li>
                    <li th:if="${dataMap.isFirstPage}==false" th:attr="data-no=${dataMap['pageNum']}-1"><a href="javascript:;"><span aria-hidden="true">←</span> 上一页</a></li>
                    <li th:if="${dataMap.isLastPage}==true" class="disabled"><a href="javascript:;">下一页 <span aria-hidden="true">→</span></a></li>
                    <li th:if="${dataMap.isLastPage}==false" th:attr="data-no=${dataMap['pageNum']}+1"><a href="javascript:;">下一页 <span aria-hidden="true">→</span></a></li>
                </ul>
            </nav>
        </section>
    </section>
</html>

